<template>
  <div class="growth_rate" id="container"></div>
</template>
<!--增长率-->

<script>
export default {
  data() {
    return {};
  },

  methods: {
    init_map() {
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/fa5518561464dbcdfbd9c063944eed07",
        zoom: 5,
        pitch: 0,
        center: [104.090834, 31.270677],
        features: ["bg", "road"],
        viewMode: "3D",
      });

      var layer = new Loca.LabelsLayer({
        fitView: true,
        map: map,
        collision: true,
      });

      $.get(
        "//a.amap.com/Loca/static/mock/trafficjam_lnglat.csv",
        function (datas) {
          layer
            .setData(datas, {
              type: "csv",
              lnglat: function (o) {
                return dist[o.value["地区"]];
              },
              lnglat: "lnglat",
            })
            .setOptions({
              style: {
                direction: "center",
                offset: [0, 0],
                text: function (data) {
                  return data.value["city"] + " " + data.value["mom"];
                },
                fillColor: function (data) {
                  var income = +data.value["mom"].slice(0, -1);
                  return income < -5
                    ? "#0C6DB0"
                    : income < -4
                    ? "#99d594"
                    : income < -3
                    ? "#99d594"
                    : income < -2
                    ? "#fee08b"
                    : income < -1
                    ? "#fee08b"
                    : "#fc8d59";
                },
                fontSize: function (data) {
                  var income = +data.value["mom"].slice(0, -1);
                  return income < -5
                    ? 12
                    : income < -4
                    ? 12
                    : income < -3
                    ? 16
                    : income < -2
                    ? 18
                    : income < -1
                    ? 26
                    : 30;
                },
                strokeWidth: 0,
              },
            })
            .render();

          layer.setzIndex(100);
        }
      );
    },
  },
  created() {},
  mounted() {
    this.init_map();
  },
};
</script>

<style scoped>
.growth_rate {
  height: 660px;
}
</style>